<template>
    <div class="box">
        <div class="question">
            <div class="title">
                <h3>大厂车检2020年度用户调查问卷</h3>
                <p>为了不断提高与改善我们的服务质量，
                    我们诚挚邀请您参加我们的调查问卷，
                    并对我们的服务进行评价，也希望您对我们的工作提出更好的建议，
                    我们将会在第一时间给您回复，
                    大厂全顺机动车检测中心全体员工感谢您的支持与理解。
                </p>
            </div>
            <div class="item">
                <h4>1、您是用什么方式办理的车检？</h4>
                <van-radio-group v-model="question1">
                    <van-radio class="list" name="A" shape="square">公众号在线预约</van-radio>
                    <van-radio class="list" name="B" shape="square">到场后通过公众号填单</van-radio>
                    <van-radio class="list" name="C" shape="square">到场后工作人员协助操作</van-radio>
                </van-radio-group>
            </div>
            <div class="item">
                <h4>2、您认为在线办理车检是否便捷？</h4>
                <van-radio-group v-model="question2">
                    <van-radio class="list" name="A" shape="square">方便快捷</van-radio>
                    <van-radio class="list" name="B" shape="square">操作麻烦</van-radio>
                    <van-radio class="list" name="C" shape="square">还未尝试</van-radio>
                </van-radio-group>
            </div>
            <div class="item">
                <h4>3、您通过哪种途径了解到在线办理？</h4>
                <van-radio-group v-model="question3">
                    <van-radio class="list" name="A" shape="square">朋友推荐 </van-radio>
                    <van-radio class="list" name="B" shape="square">到站后工作人员推荐</van-radio>
                    <van-radio class="list" name="C" shape="square">其他途径</van-radio>
                    <van-field v-if="question3 === 'C'" v-model="question3_otherContent" placeholder="" style="border:1px solid #999" />
                </van-radio-group>
            </div>
            <div class="item">
                <h4>4、您更倾向于哪种支付方式？</h4>
                <van-radio-group v-model="question4" class="disp">
                    <van-radio class="list" name="A" shape="square">现金 </van-radio>
                    <van-radio class="list" name="B" shape="square">微信支付</van-radio>
                    <van-radio class="list" name="C" shape="square">支付宝支付</van-radio>
                    <van-radio class="list" name="D" shape="square">其他</van-radio>
                    <van-field v-if="question4 === 'D'" v-model="question4_otherContent" placeholder="" style="border:1px solid #999" />
                </van-radio-group>
            </div>
            <div class="item">
                <h4>5、您希望通过公众号看到哪些推送？（可多选）</h4>
                <van-checkbox-group v-model="question5" @change="change_q5">
                    <van-checkbox shape="square" class="list" name="A">汽车年检最新政策</van-checkbox>
                    <van-checkbox shape="square" class="list" name="B">汽车养护、故障排查相关知识</van-checkbox>
                    <van-checkbox shape="square" class="list" name="C">其他</van-checkbox>
                    <van-field v-if="q5" v-model="question5_otherContent" placeholder="" style="border:1px solid #999" />
                </van-checkbox-group>
            </div>
            <div class="item">
                <h4>6、您习惯哪些时间段关注公众号推送信息（可多选）</h4>
                <van-checkbox-group v-model="question6" @change="change_q6" class="disp">
                    <van-checkbox shape="square" class="list" name="A">7点-8点</van-checkbox>
                    <van-checkbox shape="square" class="list" name="B">8点-9点</van-checkbox>
                    <van-checkbox shape="square" class="list" name="C">12点-13点</van-checkbox>
                    <van-checkbox shape="square" class="list" name="D">17点-18点</van-checkbox>
                    <van-checkbox shape="square" class="list" name="E">18点-19点</van-checkbox>
                    <van-checkbox shape="square" class="list" name="F">19点-20点</van-checkbox>
                    <van-checkbox shape="square" class="list" name="G">20-21点以后</van-checkbox>
                    <van-checkbox shape="square" class="list" name="H">21点以后</van-checkbox>
                    <van-checkbox shape="square" class="list" name="I">其他</van-checkbox>
                    <van-field v-if="q6" v-model="question6_otherContent" placeholder="" style="border:1px solid #999" />
                </van-checkbox-group>
            </div>
            <div class="item">
                <h4>7、除了车检，您还有哪些其它汽车相关的需求？（可多选）</h4>
                <van-checkbox-group v-model="question7"  @change="change_q7" class="disp">
                    <van-checkbox shape="square" class="list" name="A">洗车</van-checkbox>
                    <van-checkbox shape="square" class="list" name="B">汽车养护</van-checkbox>
                    <van-checkbox shape="square" class="list" name="C">保险 </van-checkbox>
                    <van-checkbox shape="square" class="list" name="D">其它 </van-checkbox>
                    <van-field v-if="q7" v-model="question7_otherContent" placeholder="" style="border:1px solid #999" />
                </van-checkbox-group>
            </div>
            <div class="item">
                <h4>8、您对我们的工作效率是否满意？</h4>
                <van-radio-group v-model="question8" class="disp">
                    <van-radio shape="square" class="list" name="A">一般</van-radio>
                    <van-radio shape="square" class="list" name="B">满意</van-radio>
                    <van-radio shape="square" class="list" name="C">不满意</van-radio>
                </van-radio-group>
            </div>
            <div class="item">
                <h4>9、工作人员服务态度如何？</h4>
                <van-radio-group v-model="question9" class="disp">
                    <van-radio shape="square" class="list" name="A">一般</van-radio>
                    <van-radio shape="square" class="list" name="B"> 很好</van-radio>
                    <van-radio shape="square" class="list" name="C">态度差</van-radio>
                    <van-radio shape="square" class="list" name="D">态度恶劣</van-radio>
                </van-radio-group>
            </div>
            <div class="item">
                <h4>10、请输入您的意见或建议</h4>
                <van-field
                class="message"
                v-model="question10"
                rows="4"
                type="textarea"
                placeholder="（例如本次检测过程中，哪些环节您认为需要改进？）"
                />
            </div>
            <div class="item">
                <h4>11、您的性别</h4>
                <van-radio-group v-model="question11" class="disp">
                    <van-radio shape="square" class="list" name="A">男</van-radio>
                    <van-radio shape="square" class="list" name="B">女</van-radio>
                </van-radio-group>
            </div>
            <div class="item">
                <h4>12、您的年龄</h4>
                <van-radio-group v-model="question12" class="disp">
                    <van-radio shape="square" class="list" name="A">18-25岁</van-radio>
                    <van-radio shape="square" class="list" name="B">26-30岁</van-radio>
                    <van-radio shape="square" class="list" name="C">31-40岁</van-radio>
                    <van-radio shape="square" class="list" name="D">41-50岁</van-radio>
                    <van-radio shape="square" class="list" name="E">51-60岁</van-radio>
                    <van-radio shape="square" class="list" name="F">60岁以上</van-radio>
                </van-radio-group>
            </div>
            <div class="item">
                <h4>13、您目前所从事的职业</h4>
                <van-field v-model="question13" class="message" placeholder="" />
            </div>
            <van-button class="btn" type="primary" @click="submit" block>提交</van-button>
        </div>
        <foot :navUrl="url"/>
    </div>
</template>
<script>
import foot from '@/views/footer.vue'
export default {
    name:'notice',
    data(){
        return{
            url:'/',
            userId:null,
            question1:'',
            question2:'',
            question3:'',
            question3_otherContent:null,
            question4:'',
            question4_otherContent:null,
            question5:[],
            question5_otherContent:null,
            question6:[],
            question6_otherContent:null,
            question7:[],
            question7_otherContent:null,
            question8:'',
            question9:'',
            question10:'',
            question11:'',
            question12:'',
            question13:'',
            q5:null,
            q6:null,
            q7:null
        }
    },
    created(){
        console.log('this.$route-----',this.$route)
        if (this.$route.params.carUser) {
            this.userId = this.$route.params.carUser.id
        }else{
            this.$router.push('/')
        }
        
    },
    methods:{
        change_q5(){
            this.q5 = this.question5.some(item => {
                return item === 'C' 
            });
        },
        change_q6(){
            this.q6 = this.question6.some(item => {
                return item === 'I' 
            });
        },
        change_q7(){
            this.q7 = this.question7.some(item => {
                return item === 'D' 
            });
        },
        async submit(){
            if (!this.question1) {
                this.$toast('请填写第1个问题')
            }else if(!this.question2){
                this.$toast('请填写第2个问题')
            }else if(!this.question3){
                this.$toast('请填写第3个问题')
            }else if(!this.question4){
                this.$toast('请填写第4个问题')
            }else if(!this.question5){
                this.$toast('请填写第5个问题')
            }else if(!this.question6){
                this.$toast('请填写第6个问题')
            }else if(!this.question7){
                this.$toast('请填写第7个问题')
            }else if(!this.question8){
                this.$toast('请填写第8个问题')
            }else if(!this.question9){
                this.$toast('请填写第9个问题')
            }else if(!this.question11){
                this.$toast('请填写您的性别')
            }else if(!this.question12){
                this.$toast('请填写您的年龄')
            }else{
                let primary = [
                    { 
                        questionnaireId:1,
                        answerId:this.question1,
                    },
                    { 
                        questionnaireId:2,
                        answerId:this.question2,
                    },
                    { 
                        questionnaireId:3,
                        answerId:this.question3,
                        otherContent:this.question3_otherContent
                    },
                    { 
                        questionnaireId:4,
                        answerId:this.question4,
                        otherContent:this.question4_otherContent
                    },
                    { 
                        questionnaireId:5,
                        answerId:this.question5,
                        otherContent:this.question5_otherContent
                    },
                    { 
                        questionnaireId:6,
                        answerId:this.question6,
                        otherContent:this.question6_otherContent
                    },
                    { 
                        questionnaireId:7,
                        answerId:this.question7,
                        otherContent:this.question7_otherContent
                    },
                    { 
                        questionnaireId:8,
                        answerId:this.question8,
                    },
                    { 
                        questionnaireId:9,
                        answerId:this.question9,
                    },
                    { 
                        questionnaireId:10,
                        answerId:'',
                        otherContent:this.question10
                    },
                    { 
                        questionnaireId:11,
                        answerId:this.question11,
                    },
                    { 
                        questionnaireId:12,
                        answerId:this.question12,
                    },
                    { 
                        questionnaireId:13,
                        answerId:'',
                        otherContent:this.question13
                    }
                ]
                let res = await this.$api.addUserQuestionnaire({
                    userId:this.userId,
                    carUserQuestionnaires:JSON.stringify(primary)
                })
                console.log('res--------------',res)
                if (res.status === 200) {
                    this.$toast(res.message)
                    this.$router.push('/')
                }
            }
            
        }
    },
    components:{
        foot,
    }
}
</script>
<style  lang="less" scoped>
    .box{
        overflow: hidden;
    }
    .question{
        width: 90%;
        margin:0.3rem auto 1rem auto;
        
        .title{
            h3{
                font-size: 0.4rem;
                line-height: 0.8rem;
                border-bottom: 2px solid red;
            }
            p{
                font-size: 0.3rem;
                line-height: 0.5rem;
                padding: .2rem;
                text-indent: 2em;
            }
        }
        .item{
            h4{
                font-size: 0.4rem;
                padding: 0.2rem 0;
            }
            .list{
                padding: 0.2rem 0;
                width: 50%;
                font-size: 0.4rem;
            }
            .message{
                border: 1px solid #999;
            }
        }
        .disp{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

        }
        .btn{
            margin:0.6rem auto;
        }
    }
</style>